<template>
    <div class="message-root" @scroll="content_ScrollEvent" ref="curContent">

        <!-- 输入盒子 -->
        <myLoadMessage ref="myLoadMessageDom" @change="message_LoadEvent"></myLoadMessage>

        <!-- 删除盒子 -->
        <myDelMessage ref="myDelMessageDom" @delOk="delMessage_DelEvent"></myDelMessage>

        <!-- 回到顶部 -->
        <myGtoTop></myGtoTop>

        <div class="message-content gtoTop">
            <TransitionGroup :css="false" @before-enter="item_BeforeEnterEvent" @leave="item_CleaveEvent">
                <myItem v-for="(item) in curData" :key="item.id" :curData="item" @delItem="message_DelEvent">
                </myItem>
            </TransitionGroup>
        </div>


    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import myLoadMessage from './load.vue'
import myDelMessage from './del.vue'
import myGtoTop from '@/components/layout/item/gtoTop.vue'
import myItem from './item.vue'
import { getMessageList_API } from '@/axios/api/other.js'
import { useUserStores } from '@/stores/index.js'
import gsap from 'gsap'

const userStores = useUserStores();

let isLoad = false;
let pageData = {
    page: 1,
    perPage: 30,
};
const curData = ref([]);
let messageQueue = [];

onMounted(() => {
    getMessageList(1);
});

//#region anmie
const item_CleaveEvent = (el, done) => {
    gsap.to(el, {
        delay: 0,
        height: 0,
        duration: 0.3,
        padding: 0,
        opacity: 1,
        onComplete: done,
    });
}
const item_BeforeEnterEvent = (el, done) => {
    const id = el.id.replace('floor', '');
    const cur = messageQueue.find(u => u == id);
    if (cur) {
        messageQueue = messageQueue.filter(u => u != cur);
        el.setAttribute('style', 'height: 0px;');
        gsap.to(el, {
            delay: 0.03,
            height: 'auto',
            duration: 0.3,
            opacity: 1,
            onComplete: done,
        });
    }
}
//#endregion

const myDelMessageDom = ref();
const message_DelEvent = (id) => {
    myDelMessageDom.value.del(id);
}

const delMessage_DelEvent = (id) => {
    curData.value = curData.value.filter(u => u.id != id);
}

const message_LoadEvent = (data) => {
    data.isDel = true;
    messageQueue.push(data.id);
    curData.value.unshift(data);
}

const getMessageList = (page) => {
    if (isLoad) return;
    loading.show();
    isLoad = true;
    getMessageList_API({
        page: page,
        perPage: pageData.perPage
    }).then(res => {
        console.log(res)
        const messageIds = userStores.config.messageList;
        if (page == 1) {
            curData.value = [];
        }
        for (let i = 0; i < res.result.data.length; i++) {
            const element = res.result.data[i];
            if (messageIds.find(u => u == element.id)) {
                element.isDel = true;
            }
            curData.value.push(element);
        }
        pageData = res.result.page;
    }).finally(() => {
        isLoad = false;
        loading.hide();
    });
}

const curContent = ref();
const content_ScrollEvent = (e) => {
    const { page, maxPage } = pageData;
    if (page >= maxPage) return;
    const height = curContent.value.clientHeight;
    const cur = e.target;
    if (cur.scrollTop + height + 20 > cur.scrollHeight) {
        getMessageList(pageData.page + 1);
    }
}

</script>

<style lang="scss" scoped>
.message-root {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-image: url('$/images/03.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;

    .message-content {
        width: 100%;
        max-width: 800px;
        margin: auto;
        padding-bottom: 10px;

    }
}
</style>